<!--
 * @Author: your name
 * @Date: 2021-09-26 16:38:38
 * @LastEditTime: 2021-10-03 17:37:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdatavue\src\views\others\flowechart\components\Tooltip.vue
-->
<template>
    <div class="imgboxlist">
        <Collapse default-active-key="1" :bordered="false">
            <CollapsePanel key="1" header="基础控件" :style="customStyle">
                <div class="celllist">
                    <Tooltip
                        v-for="(item, index) in initControl"
                        :key="index"
                        title="asd"
                        placement="bottom"
                    >
                        <div
                            :class="['imgbox', item.dataType]"
                            :data-type="item.dataType"
                            @mousedown="startDrag($event, item)"
                        >
                            {{ item.name }}
                        </div>
                    </Tooltip>
                </div>
            </CollapsePanel>
            <!-- <CollapsePanel key="2" header="自定义控件" :style="customStyle">
                         <div class="celllist">
                              <Tooltip 
                              title="asd" placement="bottom"
                              >
                              <div :class="['imgbox']"
                             
                                   data-type="react"
                                   @mousedown="startDrag"
                              >
                                  自定义
                              </div>
                              </Tooltip> 
                         </div> 
                    </CollapsePanel> -->
        </Collapse>
    </div>
</template>

<script lang="ts">
import { defineComponent, toRaw } from 'vue'
import { Collapse, Tooltip } from 'ant-design-vue'

export default defineComponent({
    name: 'Toollist',
    components: {
        Tooltip,
        Collapse,
        CollapsePanel: Collapse.Panel,
    },
    emits: {
        handleDrag: null,
    },
    setup(_, { emit }) {
        let initControl = [
            {
                dataType: 'round',
                name: 'iDrag',
            },
            {
                dataType: 'square',
                name: 'iMove',
            },
            {
                dataType: 'react',
                name: 'iFlow',
            },
        ]
        let constmStyle = toRaw(
            'background: #fff;border-radius: 4px;border: 0;overflow: hidden',
        )
        const startDrag = (e: MouseEvent, item) => {
            emit('handleDrag', { node: item, e })
        }
        return {
            constmStyle,
            initControl,
            startDrag,
        }
    },
})
</script>

<style lang="less" scoped>
.imgboxlist {
  height: 85vh;
  .celllist {
    display: flex;
    align-items: center;
    justify-content: center;
    .react {
      width: 80px;
      height: 30px;
      border-radius: 15px;
      border: 2px dashed #69a0f3;
      line-height: 25px;
    }
    .round {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 2px solid #69a0f3;
      line-height: 55px;
    }
    .square {
      width: 60px;
      height: 60px;
      border: 2px solid #69a0f3;
      line-height: 55px;
    }
    .imgbox {
      box-sizing: border-box;
      cursor: pointer;
      background: #fff;
      margin: 3px 4px;
      text-align: center;
      &:hover {
        background: #f7f7f7;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  &_header {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    width: 100%;
    text-align: center;
    padding: 4px 0;
  }
}
</style>
